import React from 'react'
import Head from 'next/head'
import {Row,Col,Breadcrumb,Affix} from 'antd'
import Header from '../components/header'
import Advert from '../components/advert'
import Author from '../components/author'
import Footer from '../components/footer'
import style from '../styles/pages/detail.module.css'
import { HomeOutlined,DesktopOutlined,CalendarOutlined } from '@ant-design/icons'
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import { sendActionGet } from '../utils/axios'
import { DetailAPI } from '../utils/api'
import moment from 'moment'

const Detail =(props)=>{

    marked.setOptions({
        renderer:new marked.Renderer(), 
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
                return hljs.highlightAuto(code).value;
        }
      }); 
    
    let html = marked(props.data[0].article_content) 

    return(
        <>
        <Head>
            <title>文章详情</title>
        </Head>
        <Header/>
        <Row className="common-main" type="flex" justify="center">
            <Col xs={24} sm={24} md={16} lg={18} xl={14} className="common-left">
                <div className={style.breadcontainer}>
                    <Breadcrumb>
                        <Breadcrumb.Item href='/'><HomeOutlined/>首页</Breadcrumb.Item>
                        <Breadcrumb.Item href='/list'><DesktopOutlined/>笔记列表</Breadcrumb.Item>
                        <Breadcrumb.Item>文章题目</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div>
                    <div className={style.article_title}>
                        {props.data[0].title}
                    </div>

                    <div className={style.article_icon}>
                        <span><CalendarOutlined/>发布时间：{moment(props.data[0].addTime).format('YYYY-MM-DD')}</span>
                    </div>

                    <div className={style.article_detail} dangerouslySetInnerHTML={{__html:html}} >
                        
                    </div>
                </div>
            </Col>
            <Col xs={0} sm={0} md={7} lg={5} xl={4} className="common-right">
                <Author/>
                <Advert/>
                <Affix offsetTop={3}>
                    
                </Affix>
            </Col>
        </Row>
        <Footer/>
        </>
    )

}

Detail.getInitialProps=async(context)=>{
    const id = context.query.id
    const res = await sendActionGet(DetailAPI+`/${id}`)
    return res
}

export default Detail;